import React, { useState, useEffect } from 'react';

import { Spin, Input } from 'antd';
import styles from './index.less';
import { history, ConnectRC} from 'umi';
import { PageContainer } from '@ant-design/pro-layout';

interface CheckRecordsProps {
  match: {
    url: string;
    path: string;
  };
  location: {
    pathname: string;
  };
};

const CheckRecordsPage: ConnectRC<CheckRecordsProps> = (props) => {
  const [loading, setLoading] = useState<boolean>(true);

  useEffect(() => {
    setTimeout(() => {
      setLoading(false);
    }, 3000);
  }, []);

  const { children } = props;

  const tabList = [
    {
      key: 'articles',
      tab: '文章',
    },
    {
      key: 'projects',
      tab: '项目',
    },
    {
      key: 'applications',
      tab: '应用',
    },
  ];
  const getTabKey = () => {
    const { match, location } = props;
    const url = match.path === '/' ? '' : match.path;
    const tabKey = location.pathname.replace(`${url}/`, '');
    if (tabKey && tabKey !== '/') {
      return tabKey;
    }
    return 'articles';
  };

  const handleTabChange = (key: string) => {
    const { match } = props;
    const url = match.url === '/' ? '' : match.url;
    switch (key) {
      case 'articles':
        history.push(`${url}/articles`);
        break;
      case 'applications':
        history.push(`${url}/applications`);
        break;
      case 'projects':
        history.push(`${url}/projects`);
        break;
      default:
        break;
    }
  };

  const mainSearch = (
    <div style={{ textAlign: 'center' }}>
      <Input.Search
        placeholder="请输入"
        enterButton="搜索"
        size="large"
        onSearch={()=>handleFormSubmit}
        style={{ maxWidth: 522, width: '100%' }}
      />
    </div>
  );

  const handleFormSubmit = (value: string) => {
    // eslint-disable-next-line no-console
    console.log(value);
  };

  return (
      <PageContainer
        content={mainSearch}
        tabList={tabList}
        tabActiveKey={getTabKey()}
        onTabChange={handleTabChange}
      >
        {children}
      </PageContainer>
  );
};

export default  CheckRecordsPage